import { Component, OnInit, OnDestroy } from '@angular/core'
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms'
import { Subscription } from 'rxjs'
import { NzMessageService } from 'ng-zorro-antd'

import { NewPageAccessor } from '@shared/components/new-page/new-page.interface'
import { IMenu } from '@shared/interfaces/role'
import { EMenuType } from '@shared/enums'
import { makeAllControlDirty } from 'app/utils/helpers'
import { I18NService } from '@core'
import { IMenuStatus, menuStatusMap } from '@shared/interfaces/menu'

@Component({
  selector: 'app-menu-basic',
  templateUrl: './basic.component.html',
})
export class MenuBasicComponent implements OnInit, OnDestroy, NewPageAccessor {
  data: any
  payload?: IMenu
  form: FormGroup
  menuStatusOptions: IMenuStatus[] = []
  private subscription: Subscription


  get menuStatusCtrl(): FormControl {
    return this.form.get('menuStatus') as FormControl
  }

  constructor(
    private fb: FormBuilder,
    private msg: NzMessageService,
    private i18n: I18NService,
  ) {}

  ngOnInit() {

    this.initOptions()
    this.form = this.fb.group({
      menuName: ['', [Validators.required]],
      menuStatus: [EMenuType.Function, [Validators.required]],
      menuUriPrefix: ['GET', [Validators.required]],
      menuUriPath: ['', [Validators.required]],
      menuIcon: [''],
      menuState: [''],
      menuDesc: [''],
    })
    this.subscription = this.menuStatusCtrl.valueChanges.subscribe(type => {
      const validators = [ Validators.required ]
      if (type === EMenuType.Menu || type === EMenuType.CommonMenu) {
        this.form.addControl('menuUri', new FormControl('', validators))
        this.form.removeControl('menuUriPrefix')
        this.form.removeControl('menuUriPath')
      } else {
        this.form.removeControl('menuUri')
        this.form.addControl('menuUriPrefix', new FormControl('GET', validators))
        this.form.addControl('menuUriPath', new FormControl('', validators))
      }

      this.form.updateValueAndValidity()
    })
  }

  checkValid(): boolean {
    if (this.form.valid) {
      this.pushDataToStore()
      this.msg.success(this.trans('GENERAL.NOTIFICATION.VALIDATION_SUCCESS'))
      return true
    }

    makeAllControlDirty(this.form)
    return false
  }

  pushDataToStore(): void {
    const menu: IMenu = this.form.value
    const menuStatus = this.form.get('menuStatus').value
    if (menuStatus !== EMenuType.Menu && menuStatus !== EMenuType.CommonMenu) {
      const prefix = this.form.get('menuUriPrefix').value
      const path = this.form.get('menuUriPath').value
      menu.menuUri = `${prefix}|${path}`
    }
    this.payload = menu
  }

  ngOnDestroy() {
    this.subscription.unsubscribe()
  }

  initOptions(): void {
    for (const key in menuStatusMap) {
      const option = { label: this.trans(menuStatusMap[key]), value: Number(key) }
      this.menuStatusOptions.push(option)
    }
  }

  trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }
}
